/* 这里运用了 缓存路由  编程式路由 路由特有的两个生命周期函数 路由卫士 meta属性*/

// 该文件用于创建整个应用de路由器
import VueRouter from 'vue-router'

// 引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Datle from '../pages/Datle.vue'

// 创建一个路由
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About,
            meta:{
                // isAuth:true,   //路由切换时是否需要权限控制
                title:'关于'   //路由切换成功后是否需要修改网页标题
            }
        },
        {
            path:'/home',
            component:Home,
            // 二级路由，注意路径不需要加/
            meta:{
                // isAuth:true,   //路由切换时是否需要权限控制
                title:'主页'   //路由切换成功后是否需要修改网页标题
            },
            children:[
                {
                    path:'news',
                    component:News,
                    // 添加meta属性 存放一些需要用到的数据
                    meta:{
                        isAuth:true,   //路由切换时是否需要权限控制
                        title:'新闻'   //路由切换成功后是否需要修改网页标题
                    }
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            // 给路由命名
                            name:'xiangqing',
                            path:'datle',
                            // path:'datle/:id/:title'  这是pargams携带参数的写法，在路径里面占个位
                            component:Datle
                        }
                    ],
                    meta:{
                        isAuth:true,
                        title:'消息'
                    }
                }
            ]
        }
    ]
})

// 路由卫士：路由路径在每一次切换的时候判断是否需要进行权限控制，让其切换成功
// 全局配置前置路由卫士，页面初始化的时候会被调用一次，每次路由路径切换也都会调用，每个路由路径需要配置name属性
// 接收三个参数to:去哪个路由路径  from：从哪个路由路径跳转而来 next():放行，显示组件，如果不写next则无法显示组件（无权访问）
router.beforeEach((to,from,next)=>{
    console.log('全局前置路由守卫',to,from)
    // next()
    // 如果路由路径是想要跳转到news或者message 增加一个判断，查看本地保存的数据school的值是否是aiguigu 是就放行，显示组件 不是则不放行，不显示组件（无权访问）
    // if(to.path==='/home/news' || to.path==='/home/message')
    // 也可以给需要权限判断的路由路径配置meta:{}属性,存放一个isAuth:true,这样就知道这个路由路径需要权限判断
    if(to.meta.isAuth)
    {
        if(localStorage.getItem('school') ==='1')
        {
            next()
        }
        else{
            alert('无权限访问')
        }
    }
    else{
        next()
    }
})

// 全局配置后置路由守卫
// 接收两个参数to:去哪个路由路径  from：从哪个路由路径跳转而来
router.afterEach((to,from)=>{
    console.log('全局后置路由守卫',to,from)
    // 路由切换成功之后修改网页的标题
    if(to.meta.title)   //如果有这个属性
    {
        document.title = to.meta.title  //修改网页标题
    }

})
// 暴露
export default router